<template>
  <div class="local-music">
    <van-nav-bar title="本地音乐" />
    <div class="local-content">
      <div class="local-stats">
        <div class="stat-item">
          <div class="stat-number">{{ localSongs.length }}</div>
          <div class="stat-label">本地歌曲</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ localAlbums.length }}</div>
          <div class="stat-label">专辑</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ localArtists.length }}</div>
          <div class="stat-label">歌手</div>
        </div>
      </div>
      
      <div class="section-title">最近添加</div>
      <div class="recent-songs">
        <div class="song-item" v-for="song in recentSongs" :key="song.id">
          <img :src="song.cover" class="song-cover" />
          <div class="song-info">
            <div class="song-title">{{ song.title }}</div>
            <div class="song-artist">{{ song.artist }}</div>
          </div>
          <van-icon name="play-circle-o" class="play-icon" />
        </div>
      </div>
      
      <div class="section-title">本地专辑</div>
      <div class="album-grid">
        <div class="album-item" v-for="album in localAlbums" :key="album.id">
          <img :src="album.cover" class="album-cover" />
          <div class="album-name">{{ album.name }}</div>
          <div class="album-artist">{{ album.artist }}</div>
        </div>
      </div>
      
      <van-button type="primary" round icon="plus" class="import-btn">导入本地音乐</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const localSongs = ref([
  { id: 1, title: '晴天', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 2, title: '稻香', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 3, title: '青花瓷', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 4, title: '七里香', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 5, title: '夜曲', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800' },
  { id: 6, title: '发如雪', artist: '周杰伦', cover: 'https://img.zcool.cn/community/01a3875791c9910000012e7ed45273.jpg@1280w_1l_2o_100sh.jpg' },
  { id: 7, title: '东风破', artist: '周杰伦', cover: 'https://img.zcool.cn/community/01b8ac5791c9910000012e7ed43835.jpg@1280w_1l_2o_100sh.jpg' },
  { id: 8, title: '菊花台', artist: '周杰伦', cover: 'https://img.zcool.cn/community/01d2335791c9920000012e7e953153.jpg@1280w_1l_2o_100sh.jpg' },
  { id: 9, title: '千里之外', artist: '周杰伦', cover: 'https://p2.music.126.net/3-V2-Rul_Vv2s-aL-5A7Zw==/109951165042233621.jpg' },
  { id: 10, title: '听妈妈的话', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' }
])

const recentSongs = ref(localSongs.value.slice(0, 5))

const localAlbums = ref([
  { id: 1, name: '叶惠美', artist: '周杰伦', cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F12%2F20200412210551_fcknj.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754442342&t=a2d87289180fc88f9055589a66b39041' },
  { id: 2, name: '魔杰座', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 3, name: '我很忙', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 4, name: '七里香', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 5, name: '11月的萧邦', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800' },
  { id: 6, name: '依然范特西', artist: '周杰伦', cover: 'https://img0.baidu.com/it/u=377267631,2990999101&fm=253&app=138&f=JPEG?w=760&h=760' }
])

const localArtists = ref([
  { id: 1, name: '周杰伦', avatar: 'https://p2.music.126.net/3-V2-Rul_Vv2s-aL-5A7Zw==/109951165042233621.jpg' },
  { id: 2, name: '毛不易', avatar: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 3, name: '薛之谦', avatar: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' }
])
</script>

<style scoped>
.local-music {
  min-height: 100vh;
  background: var(--van-background-color, #fff);
  color: var(--van-text-color, #222);
}
.local-content {
  padding: 16px;
}
.local-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 12px;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #f56c6c;
}
.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
.section-title {
  font-weight: bold;
  margin: 18px 0 8px 0;
  font-size: 15px;
}
.recent-songs {
  margin-bottom: 24px;
}
.song-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 12px;
}
.song-info {
  flex: 1;
}
.song-title {
  font-weight: bold;
  font-size: 14px;
}
.song-artist {
  color: #888;
  font-size: 12px;
  margin-top: 2px;
}
.play-icon {
  color: #f56c6c;
  font-size: 20px;
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.album-item {
  text-align: center;
}
.album-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  margin-bottom: 8px;
}
.album-name {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 2px;
}
.album-artist {
  color: #888;
  font-size: 10px;
}
.import-btn {
  width: 100%;
  margin-top: 16px;
}
</style>